<template>
   <div>

  <sky-panel title="提交防抖">
    <template v-slot:header>
      <span>连续点击只会触发一次</span>
    </template>
    <template v-slot:main>

      {{number}}
      <el-button type="primary" v-debounce="debounceClick">提交</el-button>

    </template>
  </sky-panel>

  <sky-code-panel>
    <div class="prewrap" v-highlight>
      <!-- 使用指令 -->
      <pre>
        <code class="html">

        { number } 
         &lt;el-button type="primary" v-debounce="debounceClick" &gt;提交&lt;/el-button&gt;

          
        </code>
        <code class="javascript">

          data() {
            return {
                number:"",
            };
          },

          methods:{
            debounceClick(){
               this.number++
            },
          }
              
        </code>
    </pre>
    </div>
  </sky-code-panel>

   </div>
</template>

<script lang="ts">
  import { defineComponent } from "vue";

  export default defineComponent({
      data() {
        return {
            number:"",
        };
      },

      methods:{
        debounceClick(){
            this.number++
        },
      }
  });
</script>


<style lang="scss" scoped>

</style>